<template>
  <div class="relation">
    <div class="change_box">
      <div class="title">
        <p class="tip">资源变更单</p>
        <div class="btn">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              导出<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item icon="el-icon-plus" @click="downloadExcel">
                  导出当前页
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click="Select_downloadExcel">
                  导出所有页</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <button @click="back" class="goBack">返回</button>
        </div>
      </div>
      <div class="tableBox">
        <div class="table" ref="container">
          <el-table
            :height="tableHeight"
            ref="multipleTable"
            :data="changeList"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            row-key="getRowKey"
            @row-click="handleRowClick"
          >
            <el-table-column align="center" prop="sysDept" label="归属处室" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" label="数量" prop="bizCount" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <el-pagination
          ref="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { download, getCmBizBySysList, GetExportCmBizBySysList } from '@/http/api/resources';

  import { ElMessage } from 'element-plus';
  import { ref, onMounted, reactive } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  const router = useRouter();
  const route = useRoute();
  const changeList = reactive([]);
  // 分页
  const changeCode = ref(router.options.history.state.back.split('/')[1]);
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const typeNum = ref(route.params.typeNum);
  const startTime = ref(route.params.startTime);
  const endTime = ref(route.params.endTime);
  const tableHeight = ref(0);
  const container = ref(null);
  onMounted(() => {
    //this.typeNum = this.$route.params.typeNum;
    getCmBizBySys_List();
    calHeight();
  });

  const getCmBizBySys_List = () => {
    getCmBizBySysList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      flag: typeNum.value,
      startTime: startTime.value,
      endTime: endTime.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.length = 0;
      (changeList as any).push(...res.data.rows);
      total.value = res.data.total;
    });
  };

  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };

  const downloadExcel = () => {
    GetExportCmBizBySysList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      flag: typeNum.value,
      startTime: startTime.value,
      endTime: endTime.value,
      currentPage: 'currentPage'
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      download_list(res.data.msg);
    });
  };
  const download_list = (type) => {
    download({
      fileName: type,
      delete: true
    }).then((res) => {
      const link = document.createElement('a');
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      });
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      link.download = type; //下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };
  const Select_downloadExcel = () => {
    GetExportCmBizBySysList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      flag: typeNum.value,
      startTime: startTime.value,
      endTime: endTime.value,
      currentPage: ''
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      download_list(res.data.msg);
    });
  };

  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    getCmBizBySysList();
  };
  const handleCurrentChange = (num) => {
    pageNum.value = num;
    getCmBizBySysList();
  };
  const back = () => {
    // router.go(-1);
    router.push({
      name: changeCode.value,
      params: {
        type: typeNum.value
      }
    });
  };
  const handleSelectionChange = (val: string) => {
    multipleTable.value = val;
  };
  // 点击行触发，选中或不选中复选框
  const handleRowClick = (row: string) => {
    multipleTable.value = row;
    // multipleTable.value.toggleRowSelection(row);
    selectChange(multipleTable.value);
  };
  const selectChange = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTable!.toggleRowSelection(del_row, false);
    }
  };
</script>
<style lang="less" scoped>
  .relation {
    width: 100%;
    height: 100vh;
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    //background-image: url("../../assets/images/background-image.jpg");
    .change_box {
      height: 100%;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        .tip {
          height: 34px;
          line-height: 34px;
          font-size: 18px;
          font-weight: 400;
          color: #46545d;
          margin: 0;
          padding: 0;
        }
        .btn {
          .goBack {
            background: #007af5;
            width: 80px;
            height: 34px;
            border: none;
            color: #fff;
            font-size: 12px;
            font-weight: 400;
          }
          .el-dropdown {
            margin: 0px 10px;
          }
          .el-dropdown-link {
            display: inline-block;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: #fff;
            background: #007af5;
            border-radius: 2px;
          }
        }
      }
      .tableBox {
        height: calc(100% - 44px);
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        .table {
          height: calc(100% - 44px);
          width: 100%;
          margin-bottom: 15px;
          :deep(.el-table-column--selection.is-leaf .el-checkbox) {
            display: none;
          }
          :deep(.el-table__cell.is-leaf) {
            //background: rgba(0, 0, 0, 0.1);
            // color: #6fd7f7;
            //color: #fff;
            color: #929ea8;
          }

          :deep(tr:hover > td) {
            background-color: transparent;
          }
          :deep(.el-table__empty-text) {
            //color: #fff;
            color: #929ea8;
          }
          :deep(td.el-table__cell) {
            //color: #fff;
            color: #929ea8;
          }
        }
        .el-pagination {
          height: 34px;
          padding: 0;
          box-sizing: border-box;
          width: 50%;
          :deep(.el-pagination__total) {
            font-size: 14px;
            font-weight: 400;
            color: #bbbbbb;
            line-height: 34px;
          }

          :deep(.el-input__inner) {
            height: 34px;
            //width: 60px;
            background: #fff;
            //color: #66b1ff;
            color: #46545d;
          }
          :deep(button:disabled) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(.el-pager li) {
            //background: rgba(0, 0, 0, 0.1);
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
            &.active {
              // color: #fff;
              color: #46545d;
            }
          }
          :deep(.btn-prev) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(.btn-next) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(span:not([class*='suffix'])) {
            color: #bbbbbb;
          }
          .el-pagination__jump {
            height: 34px;
            line-height: 34px;
          }
        }
      }
    }
  }
</style>
